<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/fakeFileInputs.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <script type="text/javascript" src="../Controllers/popup.js"></script>
        <script>
            function ajaxFileUpload()
            {
                
                var src=document.getElementById("fileToUpload").value;
                jpg=src.split(".")[1];
                if(jpg=="jpg"|| jpg=="JPG" || jpg=="jpeg"|| jpg=="JPEG"){
                    $("#uploadLoader").show();
                    $('#uploader').hide();
                    jsontemp=JSON.parse(localStorage.authtokenObj);
                    json=
                        {
                        "key":jsontemp.token.key,
                        "secret":jsontemp.token.secret,
                        "function":4
                    }
                    window.localStorage.uploading=1;
                    $.ajaxFileUpload
                    ({
                        url:background.netlogStaticData.baseURL+background.netlogStaticData.dofunctionURL,
                        secureuri:false,
                        fileElementId:'fileToUpload',
                        dataType: 'json',
                        data:json,
                        success: function (response){
                            $("#uploader").hide();
                            $("#addphoto").show();
                            $("#uploadLoader").hide();
                            //   $("#imguploaded").attr('src', src)
                            window.localStorage.removeItem("uploading")
                            console.log(response);
                        },
                        error: function (e)
                        {
                            $("#loader").hide();
                            console.log("keko yad"+e);
                        }
                    })
                }else{
                    alert("Choose JPG Image");
                }
                return false;

            }
        </script>
    </head>
    <body>
        <div class="main-container">

            <!-- header -->
            <header>
                <a href="http://www.netlog.com" class="f" target="_blanck">
                    <img src="images/logo.png" alt="Netlog" />
                </a>
                <a href="#" class="logout f-r">Log In</a>
                <div class="clearfix"></div>
            </header>

            <!-- tabs side bar-->

            <aside class="f" id="leftmenue">
                <div class="sep"></div>
                <nav>
                    <div class="tabs f ta-c">
                        <a href="#" class="notifaction-link active" id="notifaction-link"></a>
                        <div>Notification</div>
			<div class="notifaction-counter" id="notify-counter"></div>
                    </div>

                    <div class="tabs f ta-c">
                        <a  href="#" class="friends-link" id="friends-link"></a>
                        <div>Friends Log</div>
			<div class="notifaction-counter" id="log-counter"></div>
                    </div>

                    <div class="tabs f ta-c"  >
                        <a  href="#" class="visitors-link" id="visitors-link" ></a>
                        <div>Visitors</div>
                        <div class="notifaction-counter" id="visitor-counter"></div>
                    </div>

                    <div  class="tabs f ta-c" >
                        <a href="#" class="photo-link" id="photo-link"></a>
                        <div>Upload Photo</div>
                    </div>
                </nav>
            </aside>

            <!-- content -->

            <article class="content f-r" id="content-notifaction-link">
                <h2>
                    <img src="images/notification-header.png" alt="" />
            	Notification
                </h2>
                <div class="scrollable-area" id="notificationfeed">
                    <section class="gray-round">
                        <a href="#">
                            Thomas Bouve
                            <span>shouts</span>
                        </a>
                        <p>
                        	Vivamus aliquet, est vel cursus egestas, dui enim placerat massa, id adipiscing urna enim eu neque
                        </p>
                        <p class="time">Today at 12:32</p>
                    </section>
                </div>
            </article>

            <article class="content f-r" id="content-friends-link" style="display:  none">
                <h2>
                    <img src="images/friends-header.png" alt="" />
            	Friends Log
                    <span class="h-notifaction-counter" id="notifaction-counter"></span>
                </h2>
                <div class="scrollable-area" id="friendfeed">
                    <div class="date">Monday 5 SEP</div>
                    <section class="gray-round fr-section">
                        <p>17:30  <a href="#">Mostafa</a> And <a href="#">Ali</a> are now friends</p>
                        <p>13:40  <a href="#">Morsy</a> And <a href="#">Ali</a> are now friends</p>
                        <p>13:40  <a href="#">Morsy</a> And <a href="#">Ali</a> are now friends</p>
                    </section>
                </div>
            </article>

            <article class="content f-r" id="content-visitors-link"  style="display:  none">
                <h2>
                    <img src="images/visitors-header.png" alt="" />
            	Visitors
                </h2>
                <div class="scrollable-area" id="vistorfeed">
                    <section class="gray-round visitors-container">
                        <img src="images/visitor-image.png" class="f"/>
                        <a href="#" class="f">hend elwan</a>
                        <span class="f-r visitor-time">4 SEP 08 : 45</span>
                        <div class="clearfix"></div>
                    </section>
                </div>
            </article>
            <article class="content f-r" id="content-photo-link"  style="display:  none">
                <div   id="uploadLoader" style="display:  none">
                    <img src="images/ajax-loader.gif" class="f" style="position: absolute;z-index: 100; top: 39%; left: 37%;"  />
                    <p style="position: absolute;z-index: 100;top: 335;left: 43%;color: red;">Uploading........</p>
                </div>

                <h2>
                    <img src="images/upload-header.png" alt="" />
            	Upload Photo
                </h2>
                <div class="upload-area" >

                    <div class="uploader dark" id="uploader">
                        <form name="form" action="" method="POST" enctype="multipart/form-data">
                            <input type="text" class="filename" readonly="readonly"/>
                            <input type="button" class="button" value="Browse..."/>
                            <input id="fileToUpload" type="file" size="45" name="fileToUpload" >
                            <div class="ta-c upload-hint">Only JPEG/JPG files are allowed.</div>
                            <p class="ta-c">
                                <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
                            </p>
                        </form>
                    </div>
                    <div  style="display:  none" id="addphoto">
                        <div class="uploaded-txt ta-c f">
            	Photo has been added successfully
                        </div>
                        <p class="ta-c">
                            <input type="submit"  id="anotherimg" value="add another photo">
                        </p>
                    </div>
                </div>
            </article>
        </div>
        <!--        <form name="form" action="" method="POST" enctype="multipart/form-data">
                    <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">

                    <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
                </form>-->
        <div class=""  id="loader">
            <img src="images/ajax-loader.gif" class="f" style="position: absolute;z-index: 100; top: 39%; left: 37%;" />
            <p style="position: absolute;z-index: 100;top: 47px;left: 80px;color: #666;font-family: arial;" id="authMsg"></p>
        </div>
    </body>
</html>

